<template>
	<view class="earn-task">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<gyd-article :detail="content"></gyd-article>

		<view class="footer" v-if="content && content.keyword">
			<!-- 免费喝水 -->
			<view class="btn-group" v-if="content.keyword=='water'">
				<view @click="pageTabRoute('/pages/tabbar/water/water?is_free_queuing=1')">去免费喝水</view>
			</view>

			<!-- 产品招商引荐奖/伯乐奖（招代理商） -->
			<view class="btn-group" v-if="content.keyword=='brand' || content.keyword=='agent'">
				<view @click="pageRoute('/servePages/earn/qrcode')">分享好友</view>
				<view @click="pageRoute('/servePages/earn/team')">查看我的团队</view>
			</view>

			<!-- 城市运营中心奖 -->
			<view class="btn-group" v-if="content.keyword=='operati-center'">
				<view @click="pageRoute('/lifePages/water-rack/water-rack')">去购买</view>
			</view>

			<!-- 团队扶持奖（培养奖、领导奖） -->
			<view class="btn-group" v-if="content.keyword=='support'">
				<view @click="pageRoute('/servePages/agent/update-agent')">去升级</view>
			</view>

			<!-- 介绍客户得永久提成 -->
			<view class="btn-group" v-if="content.keyword=='spread'">
				<view @click="pageRoute('/servePages/agent/update-agent')">升级代理</view>
				<view @click="pageRoute('/lifePages/gift-pack/gift-pack')">购买礼包</view>
				<view @click="pageRoute('/lifePages/water-rack/water-rack')">采购架子</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		reactive,
		toRefs,
		inject,
		ref,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '挣钱方式介绍',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		article_id: 0,
		content: {},
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
			state.article_id = opt.id;
		}
		getContent();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function getContent() {
		request.get('content/getArticle', {
			id: state.article_id
		}).then(res => {
			console.log('挣钱方式介绍', res);
			if (res.data) {
				state.content = res.data;
			}
		})
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		article_id,
		content,
	} = toRefs(state);
</script>

<style lang="scss">
	.earn-task {
		.footer {
			position: fixed;
			/* 固定在底部 */
			bottom: 0;
			width: 100%;

			.btn-group {
				display: flex;

				view {
					flex: 1;
					border-radius: 40rpx;
					line-height: 80rpx;
					text-align: center;

					color: #fff;

					&:nth-child(1) {
						margin-right: 10rpx;
						background: linear-gradient(to right, #60a9ff, #599bff);
					}

					&:nth-child(2) {
						margin-left: 10rpx;
						background: linear-gradient(to right, #ff9666, #ff6960);
					}

					&:nth-child(3) {
						margin-left: 20rpx;
						background: linear-gradient(to right, #ff55ff, #ff00ff);
					}
				}
			}
		}
	}
</style>